<template>
  <div>
    <div id="login-container">
      <el-container>
        <el-main>
          <div class="userPwdPanel">
            <div class="login-title-panel">
              <div class="login-title">
                <a href="javascript:void(0)" class="main-color">帐号登录</a>
              </div>
            </div>
          <div class="login-content-panel">
            <div>
              <el-input placeholder="" v-model="userName">
                <template slot="prepend"><i class="icon iconfont icon-yonghu1"></i></template>
              </el-input>
            </div>
            <div>
              <el-input placeholder="" v-model="pwd">
                <template slot="prepend"><i class="icon iconfont icon iconfont icon-mimayaochi"></i></template>
              </el-input>
            </div>
            <el-row>
              <el-button type="success" style="width:100%;" @click.native="loginMethod" class="main-bg-color">登 录</el-button>
            </el-row>
            <el-row>
              <el-button type="text" class="main-color" >忘记密码？</el-button>
            </el-row>
          </div>
        </div>
      </el-main>
    </el-container>
  </div>
</div>
</template>
<script>
export default {
  data () {
    return {userName: '', pwd: ''}
  },
  created () {
    this.initMethod()
  },
  methods: {
    initMethod () {
      console.log(this.data)
    },
    loginMethod () {
      let params = {userName: this.userName, pwd: this.pwd}
      this.$api.post('login', params, r => {
        if (r.data != null) {
          this.$store.commit('isLogin', r.data)
          this.$router.push({ path: 'index' })
        } else {
          alert('请输入正确的用户名和密码！！！')
        }
      })
    }
  }
}
</script>

<style>
.userPwdPanel{
  margin:0 auto;
  width:400px;
  height:360px;
  padding: 0 30px 20px 30px;
  border:1px solid #ccc;
  box-shadow: 0 0 25px #cac6c6;
  border-radius:5px;
  background:#fff;
  position: absolute;
  top: 40%;
  left:0;
  top: 0;
  bottom: 0;
  right: 0;
  margin: auto;
}
.el-main {
  background-color: #E9EEF3;
  color: #333;
  text-align: center;
  line-height: 60px;
}
.login-title-panel{
  height: 60px;
  line-height: 25px;
  border-bottom: 1px solid #eee;
}
.login-title-panel a {
  color: #F73632;
  font-size: 24px;
  line-height: 66px;
  height: 66px;
  padding-left: 20px;
}
.login-content-panel{
  padding-top:30px;
}
</style>
